let car_data = getId();
// console.log(car_data);
let data = [];
for (var id in car_data) {
    data.push(car_data[id]);
}
render();


function reload() {
    data.length = 0
    for (var id in car_data) {
        data.push(car_data[id]);
    }
}

// 获取id
function getId() {
    try {
        let data = JSON.parse(localStorage.getItem("car"))
        if (data === null) {
            return {}
        }
        return data;
    } catch (e) {
        return {};
    }
}
// 渲染
function render() {
    let html = '';
    for (var i = 0; i < data.length; i++) {
        html = ` <div class="goods" data-id="${data[i].id}">
        <div class="store">
            <div class="cart-checkbox">
                <input type="checkbox">
            </div>
            <b>创晟美妆专营店</b>

            <div class="freight">
                运费：#0.00
            </div>
        </div>
        <div class="item">
            <div class="item-main">
                <div class="cart-checkbox">
                    <input type="checkbox">
                </div>
                <div class="goodpic">
                    <img src="${data[i].src}"
                        alt="">
                </div>
                <div class="goodtitle">
                ${data[i].title}
                </div>
                <a class="serve">
                    选购增值服务
                </a>
                <div class="goodprice">
                    <div class="price">
                    ${data[i].price}
                    </div>
                </div>
                <div class="goodcount">
                    <a href="javascript:void(0)" class="sub" data-id="${data[i].id}"></a>
                    <input type="text" class="count" data-min="1" value="${data[i].count}" data-id="${data[i].id}">
                    <a href="javascript:void(0)" class="add" data-id="${data[i].id}"> + </a>
                </div>
                <div class="pricesum">   

                            </div>
                            <div class="credits">
                            <em>￥${parseInt((data[i].price).replace("<i>¥</i>", "").replace("<i>","").replace("</i>",""))}</em>
              
            </div>
            <div class="del">
            <a href="javascript:void(0)" id="del" data-id="${data[i].id}">
                删除
            </a>
        </div>
        </div>
    </div>`
    
    console.log(parseInt((data[i].price).replace("<i>¥</i>", "").replace("<i>","").replace("</i>","")));
        $(".goodslist").append(html);
    }
    total();
}
$(".delete").on("click", (e) => {
    for (var id in car_data) {
        delete car_data[id];
        $(".goods").remove();
    }
    save();
    total();
});
console.log();
$(".del").on("click", (e) => {
    console.log(18);
    let id = $(e.target).parent().parent().parent().parent().attr("data-id")
    console.log(id);
    delete car_data[id];
    $(e.target).parent().parent().parent().parent().remove();
    save();
    total()
})
$(".goods").find(".add").on("click", (e) => {
    let id = $(e.target).parent().parent().parent().parent().attr("data-id")
        // console.log(id);
    car_data[id].count++;
    
    $(e.target).siblings("input").val(car_data[id].count)
    reload();
    save();
    
    $('.credits em').each((index, item) => {
        // console.log(1);
        console.log(data[index].price.slice(1));
        $(item).text('￥' + parseInt((data[index].price).replace("<i>¥</i>", "").replace("<i>","").replace("</i>","")) * data[index].count)
    })
   
    
    total();
})
$(".goods").find(".sub").on("click", (e) => {
    console.log(123);
    let id = $(e.target).parent().parent().parent().parent().attr("data-id");
    if (car_data[id].count < 2) {
        delete car_data[id]
        $(e.target).parent().parent().parent().parent().remove()
    } else {
        car_data[id].count--
    }
    try{
        $(e.target).siblings("input").val(car_data[id].count)
    }catch (e) {

    }
    save();
    reload();
    $('.credits em').each((index, item) => {
        $(item).text('￥' + parseInt((data[index].price).replace("<i>¥</i>", "").replace("<i>","").replace("</i>","")) * data[index].count)
    })
    total()
})


// 全选
$(".car-checkbox").on("change", ".checkbox", () => {
    console.log(666);
    if ($(".checkbox").is(":checked")) {
        $(".goods").find("input[type='checkbox']").each((index, item) => {
            $(item).prop("checked", true);
        })
        totalnum = $(".goods").children().length;
    } else {
        $(".goods").find("input[type='checkbox']").each((index, item) => {
            $(item).prop("checked", false);
        })
        totalnum = 0;
    }
    // console.log(123);
    $(".price em").text(totalnum);
    total();
})

let totalnum = 0;
$(".goods").find("input[type='checkbox']").on("change", (e) => {
    if ($(e.target).is(":checked")) {
        $(e.target).prop("checked", true);
        totalnum++;
    } else {
        totalnum--;
    }
    total();
    // $(".balance .price em").text(totalnum);
})

// 总数
function total() {
    let totalprice = 0;
    $(".goods").find(".credits").each((index, item) => {
        let price = 0;
        if ($(item).siblings(".checkbox").children("input[type = 'checkbox']").is(":checked") === true) {
            console.log(1);
            price = parseInt($(item).children().html().slice(1));
       
        }
        console.log(price);
        totalprice += price;
     
    })
    $(".balance .price em").text(totalprice);
}


function save(){
    localStorage.setItem( "car" , JSON.stringify(car_data));
}
